<template>
  <div>
    <n-drawer
      v-model:show="drawerData"
      placement="left"
      :style="{
        marginTop: '2.4rem',
        width: '4.5rem',
        background: '#1C262D',
      }"
      :trap-focus="false"
      :block-scroll="false"
      :show-mask="true"
    >
      <n-drawer-content>
        <n-scrollbar style="max-height: calc(100vh - 9rem)">
          <div class="content">
            <div
              v-if="token"
              class="item-menu"
              :class="menuActive.A === '' ? 'active' : ''"
              @click="openPage('')"
            >
              <icons class="menu-icon" name="home" />
              <div class="menu-txt">HOME</div>
            </div>
            <!-- <div
            v-if="store.superUser === 0"
            class="item-menu"
            :class="menuActive.A === 'companyManage' ? 'active' : ''"
            @click="openPage('companyManage'), (menuActive.A = 'companyManage')"
          >
            <icons class="menu-icon" name="company" />
            <div class="menu-txt">公司管理</div>
          </div>
          <div
            v-if="store.superUser === 0"
            class="item-menu"
            :class="menuActive.A === 'templateManage' ? 'active' : ''"
            @click="
              openPage('templateManage'), (menuActive.A = 'templateManage')
            "
          >
            <icons class="menu-icon" name="temp" />
            <div class="menu-txt">模版管理</div>
          </div> -->
            <div
              v-if="store.superUser === 0"
              class="item-menu"
              :class="menuActive.A === 'history' ? 'active' : ''"
              @click="openPage('history')"
            >
              <icons class="menu-icon" name="history" />
              <div class="menu-txt">登录历史</div>
            </div>
            <div
              v-for="(mnue, i) in mnueList"
              :key="i"
              class="item-menu"
              :class="menuActive.A === mnue.parent.id ? 'active' : ''"
              @click="openChideMune(mnue.models, mnue.parent.id)"
            >
              <img
                v-if="mnue.parent.picture"
                class="menu-icon"
                :src="mnue.parent.picture"
                alt=""
              />
              <icons v-else class="menu-icon" name="title-A" />
              <div class="menu-txt">
                {{ mnue.parent.name }}
              </div>
            </div>
          </div>
        </n-scrollbar>
        <n-drawer
          v-model:show="demoDrawer"
          placement="left"
          :style="{
            width: '4.5rem',
            margin: '2.4rem 0 0 4.5rem',
            background: '#1C262D',
          }"
          :trap-focus="false"
          :block-scroll="false"
          :show-mask="false"
        >
          <n-drawer-content>
            <div class="content">
              <div
                v-for="item in chidList"
                :key="item.id"
                class="item-menu"
                :class="menuActive.B === item.id ? 'active' : ''"
                @click="openPageFun(item)"
              >
                <img
                  v-if="item.picture"
                  class="menu-icon"
                  :src="item.picture"
                  alt=""
                />
                <icons v-else class="menu-icon" name="title-A" />
                <div class="menu-txt">
                  {{ item.modelName }}
                </div>
              </div>
            </div>
          </n-drawer-content>
        </n-drawer>
        <div v-if="!token" class="user-img" @click="openPage('login')">
          <icons class="icon" name="touxiang" />
          <div class="name"></div>
        </div>
        <div v-else class="user-img" @click="openPage('userInfo')">
          <img class="icon" :src="userInfo.avatar" alt="" />
          <div class="name">{{ userInfo.account }}</div>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script lang="ts" setup>
import { computed, watch, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useAppStore } from "@/store/modules/user";
import { tmpStore } from "@/store/modules/template";
import { GetModuleType } from "@/server";
const template = tmpStore();
const store = useAppStore();
const router = useRouter();
const route = useRoute();
const dataList = computed(() => template.mnueData);
const mnueList = computed(() => {
  return dataList.value.filter((e: any) => e.parent.isVisible);
});
const menuActive = ref({ A: "", B: "" }); //选中菜单
const token = computed(() => store.token);
const userInfo = computed(() => store.userInfo);
const background = computed(() => template.systemData);
const drawerData = ref(false);
const demoDrawer = ref(false);
watch(
  () => route.meta.title,
  (newCount) => {
    console.log(newCount);
    if (newCount === "首页") {
      menuActive.value.A = "";
      menuActive.value.B = "";
    } else if (newCount === "账户") {
      menuActive.value.A = "";
      menuActive.value.B = "";
    }
  },
  { immediate: true }
);
const openPage = (path: string) => {
  menuActive.value.A = path ? path : "/";
  menuActive.value.B = "";
  localStorage.setItem("menuActive", JSON.stringify(menuActive.value));
  demoDrawer.value = false;
  router.push("/" + path);
  store.openMenu(false);
};
const chidList = ref([]) as any;
const openChideMune = (item: any, id: string) => {
  menuActive.value.A = id;
  localStorage.setItem("menuActive", JSON.stringify(menuActive.value));
  chidList.value = item.filter((e: any) => e.isVisible);

  demoDrawer.value = true;
};
/**
 * @description: 获取模块应用类型列表
 * @return {*}
 * @author: cool panda
 */
const openPageFun = async (item: any) => {
  menuActive.value.B = item.id;
  localStorage.setItem("menuActive", JSON.stringify(menuActive.value));
  let path = item.moduleType;
  if (item.applicationType === "DataSheet" && path !== "B1") {
    path = "B2";
  }
  let url = path + "/" + item.id;
  if (path === "B2") {
    const houzui = item.remark ? "/" + item.remark : "/1";
    url = url + "/" + item.moduleType + houzui;
  }
  openPage(url);
};
watch(
  () => store.showDrawer,
  (newCount, oldCount) => {
    drawerData.value = newCount;
  }
);
watch(
  () => drawerData.value,
  (newCount, oldCount) => {
    if (newCount !== store.showDrawer) {
      store.openMenu(newCount);
    }
  }
);
onMounted(() => {
  const menu = localStorage.getItem("menuActive");
  if (menu) {
    menuActive.value = JSON.parse(menu);
  }
});
</script>
<style lang="less" scoped>
:deep(.n-drawer-body-content-wrapper) {
  padding: 0 !important;
}
.content {
  background-color: #1c262d;
  .item-menu {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0;
    &.active {
      border-right: 4px solid #02a8ae;
    }

    .menu-icon {
      width: 1rem;
      height: 1rem;
      color: #fff;
    }

    .menu-txt {
      margin-top: 0.2rem;
      font-size: 0.7rem;
      color: #fff;
    }

    .bg-blue {
      color: #01bbde;
    }
  }
}

.drawer-two {
  :deep(.n-drawer-container) {
    left: 200px !important;
  }
}

.user-img {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 8px;
    border-radius: 100%;
  }

  .name {
    font-size: 0.95rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5rem;
    margin-bottom: 1.2rem;
  }
}
</style>
